<script setup lang="js">
import {defineProps, onBeforeMount, ref, watch, nextTick, computed, onMounted} from 'vue'
import {item_store, staticAssertsStore} from "@/renderer/main-window/stores/storeAsserts.js";
import {storeSystemCertificateInfo} from "@/renderer/main-window/stores/storeSystemCertificateInfo.js";

const {itemId} = defineProps({
  "itemId": {
    type: Number
  },
  "size": {
    default: "small"
  }
})

const src = computed(() => {
  const iconPathUri = staticAssertsStore().getAssertSync({
    "key": item_store,
    "id": itemId
  })?.iconPath;
  if (iconPathUri) {
    return `${storeSystemCertificateInfo().getImgProxyPrefix()}${iconPathUri}`;
  }
  return '';
})

const itemInnerHtml = computed(() => {
  const description = staticAssertsStore().getAssertSync({
    "key": item_store,
    "id": itemId
  })?.description;
  return description;
})


</script>

<template>

<!--  <el-popover-->
<!--      :trigger="'hover'"-->
<!--      :placement="'top-start'"-->
<!--  >-->
<!--    <template #reference>-->
<!--      <el-avatar :src="src" :size="size"/>-->
<!--    </template>-->

<!--    <template #default>-->
<!--      <div v-html="itemInnerHtml"></div>-->
<!--    </template>-->
<!--  </el-popover>-->
  <el-avatar :src="src" :size="size"/>

</template>

<style >

mainText{
  font-size: medium;

}

attention{
  color: rgb(19,68,78);
}

stats{
  color: rgb(19,68,78);
}

passive{
  color: rgb(174,149,99);
}
</style>


<!--<maintext>-->
<!--<stats>-->
<!--  <attention>100</attention>-->
<!--  法术强度<br>-->
<!--  <attention> 600</attention>-->
<!--  法力<br>-->
<!--  <attention>10</attention>-->
<!--  技能急速-->
<!--</stats>-->
<!--<br><br>-->
<!--<passive>开火</passive>-->
<!--<br>伤害型技能会发射6层弹丸，对目标和附近的敌人们造成-->
<!--<magicdamage>额外魔法伤害</magicdamage>-->
<!--。剩余【弹丸】会对主要目标发射，造成20%伤害。<br></maintext>-->